<template>
  <FullscreenDataScreen :fullscreen="fullscreen">
    <div class="customer-insight-screen" ref="screenRef">
      <!-- 头部标题 -->
      <div class="screen-header">
        <div class="header-left">
          <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" />
          </div>
          <div class="title">
            电信客户流失预警系统 - 客户洞察大屏
            <!-- 在标题右侧放置返回按钮占位元素，仅在全屏模式下显示 -->
            <div v-if="fullscreen" class="back-button-placeholder"></div>
          </div>
        </div>
        <div class="header-center">
          <div class="time">{{ currentTime }}</div>
        </div>
        <div class="header-right">
          <!-- 添加全屏切换按钮 -->
          <el-button v-if="!fullscreen" size="small" type="primary" @click="enterFullscreen">
            <el-icon><FullScreen /></el-icon> 全屏
          </el-button>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="screen-content">
        <!-- 左侧面板 -->
        <div class="left-panel">
          <!-- 客户画像 -->
          <div class="panel-item customer-portrait">
            <div class="panel-header">
              <div class="panel-title">客户画像分析</div>
            </div>
            <div class="panel-content">
              <div class="portrait-chart" ref="portraitChart"></div>
            </div>
          </div>

          <!-- 客户年龄分布 -->
          <div class="panel-item age-distribution">
            <div class="panel-header">
              <div class="panel-title">客户年龄分布</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="ageChart"></div>
            </div>
          </div>
        </div>

        <!-- 中间面板 -->
        <div class="center-panel">
          <!-- 用户活跃度 -->
          <div class="panel-item customer-activity">
            <div class="panel-header">
              <div class="panel-title">用户活跃度分析</div>
            </div>
            <div class="panel-content">
              <div class="customer-stats">
                <div class="stat-item">
                  <div class="stat-value">{{ formatNumber(activityData.totalCustomers) }}</div>
                  <div class="stat-label">总客户数</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ formatNumber(activityData.activeCustomers) }}</div>
                  <div class="stat-label">活跃客户</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ formatNumber(activityData.inactiveCustomers) }}</div>
                  <div class="stat-label">不活跃客户</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ activityData.activityRate }}%</div>
                  <div class="stat-label">活跃率</div>
                </div>
              </div>
              <div class="chart-container" ref="activityChart"></div>
            </div>
          </div>

          <!-- 消费趋势 -->
          <div class="panel-item spending-trend">
            <div class="panel-header">
              <div class="panel-title">客户消费趋势</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="spendingChart"></div>
            </div>
          </div>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
          <!-- 合同类型分布 -->
          <div class="panel-item contract-distribution">
            <div class="panel-header">
              <div class="panel-title">合同类型分布</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="contractChart"></div>
            </div>
          </div>

          <!-- 服务使用情况 -->
          <div class="panel-item service-usage">
            <div class="panel-header">
              <div class="panel-title">服务使用情况</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="serviceChart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部区域 -->
      <div class="screen-footer">
        <div class="footer-stats">
          <div class="stat-item">
            <span class="stat-label">平均客户生命周期:</span>
            <span class="stat-value">{{ footerStats.avgLifetime }} 个月</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">月均消费:</span>
            <span class="stat-value">¥{{ footerStats.avgMonthlySpend }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">客户满意度:</span>
            <span class="stat-value">{{ footerStats.satisfaction }}%</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">客户留存率:</span>
            <span class="stat-value">{{ footerStats.retentionRate }}%</span>
          </div>
        </div>
      </div>
    </div>
  </FullscreenDataScreen>
</template>

<script setup name="CustomerInsightScreen">
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { debounce } from 'lodash-es'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import FullscreenDataScreen from '@/components/layout/FullscreenDataScreen.vue'
import { FullScreen } from '@element-plus/icons-vue'
import { getCustomerInsightData } from '@/api/modules/datascreen'

// 接收全屏模式参数
const props = defineProps({
  fullscreen: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()

// 进入全屏模式
const enterFullscreen = () => {
  // 使用重定向到全屏路由
  router.push(`/fullscreen/datascreen/customer`)
}

// 响应式引用
const screenRef = ref(null)
const portraitChart = ref(null)
const ageChart = ref(null)
const activityChart = ref(null)
const spendingChart = ref(null)
const contractChart = ref(null)
const serviceChart = ref(null)

// 图表实例
const charts = {
  portrait: null,
  age: null,
  activity: null,
  spending: null,
  contract: null,
  service: null
}

// 当前时间
const currentTime = ref(formatDateTime(new Date()))
let timer = null

// 数据状态
const insightData = ref(null)
const loading = ref(false)

// 计算属性
const activityData = computed(() => {
  return insightData.value?.activityData || {
    totalCustomers: 45678,
    activeCustomers: 32456,
    inactiveCustomers: 13222,
    activityRate: 71.1
  }
})

const footerStats = computed(() => {
  return insightData.value?.footerStats || {
    avgLifetime: 24.5,
    avgMonthlySpend: 78.45,
    satisfaction: 92.3,
    retentionRate: 86.7
  }
})

// 格式化数字
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

// 格式化日期时间
function formatDateTime(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 加载客户洞察数据
const loadInsightData = async () => {
  try {
    loading.value = true
    console.log('开始加载客户洞察数据...')

    const response = await getCustomerInsightData()
    console.log('客户洞察数据响应:', response)

    if (response.success) {
      insightData.value = response.data
      console.log('客户洞察数据加载成功:', insightData.value)

      // 重新初始化图表
      nextTick(() => {
        initAllCharts()
      })
    } else {
      throw new Error(response.message || '获取数据失败')
    }
  } catch (error) {
    console.error('加载客户洞察数据失败:', error)
    ElMessage.warning('数据加载失败，使用模拟数据')

    // 使用默认数据
    insightData.value = {
      activityData: {
        totalCustomers: 45678,
        activeCustomers: 32456,
        inactiveCustomers: 13222,
        activityRate: 71.1
      },
      footerStats: {
        avgLifetime: 24.5,
        avgMonthlySpend: 78.45,
        satisfaction: 92.3,
        retentionRate: 86.7
      }
    }

    // 初始化图表
    nextTick(() => {
      initAllCharts()
    })
  } finally {
    loading.value = false
  }
}

// 初始化客户画像词云图
const initPortraitChart = () => {
  if (!portraitChart.value) return null

  const chart = echarts.init(portraitChart.value)

  // 使用真实数据或默认数据
  const portraitData = insightData.value?.portraitData || [
    { name: "20-30岁", value: 300 },
    { name: "互联网服务", value: 280 },
    { name: "月付套餐", value: 250 },
    { name: "电子支付", value: 220 },
    { name: "流媒体用户", value: 210 },
    { name: "高消费群体", value: 200 },
    { name: "在线备份", value: 180 },
    { name: "设备保护", value: 170 },
    { name: "技术支持", value: 160 },
    { name: "多线业务", value: 150 },
    { name: "高速光纤", value: 140 },
    { name: "年轻群体", value: 135 },
    { name: "城市用户", value: 130 },
    { name: "数字生活", value: 125 },
    { name: "智能家居", value: 120 },
    { name: "单身用户", value: 115 },
    { name: "商务人士", value: 110 },
    { name: "教育背景高", value: 105 },
    { name: "信用良好", value: 100 },
    { name: "科技迷", value: 95 }
  ]

  const option = {
    tooltip: {
      show: true
    },
    series: [{
      type: 'wordCloud',
      shape: 'circle',
      left: 'center',
      top: 'center',
      width: '100%',
      height: '100%',
      right: null,
      bottom: null,
      sizeRange: [12, 50],
      rotationRange: [-45, 45],
      rotationStep: 15,
      gridSize: 8,
      drawOutOfBound: false,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        color: function() {
          // 随机颜色
          return 'rgb(' + [
            Math.round(Math.random() * 160 + 95),
            Math.round(Math.random() * 160 + 95),
            Math.round(Math.random() * 160 + 95)
          ].join(',') + ')';
        }
      },
      emphasis: {
        textStyle: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: portraitData
    }]
  }

  chart.setOption(option)
  return chart
}

// 初始化年龄分布图表
const initAgeChart = () => {
  if (!ageChart.value) return null

  const chart = echarts.init(ageChart.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['18-25', '26-35', '36-45', '46-55', '56-65', '65+'],
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '客户数量',
        type: 'bar',
        barWidth: '60%',
        data: [5800, 12500, 10300, 8700, 5400, 2800],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#0d52a3' }
          ])
        }
      }
    ]
  }

  chart.setOption(option)
  return chart
}

// 初始化活跃度图表
const initActivityChart = () => {
  if (!activityChart.value) return null

  const chart = echarts.init(activityChart.value)

  // 生成过去12个月的标签
  const months = []
  const date = new Date()
  for (let i = 11; i >= 0; i--) {
    const monthDate = new Date(date)
    monthDate.setMonth(date.getMonth() - i)
    months.push(`${monthDate.getFullYear()}-${String(monthDate.getMonth() + 1).padStart(2, '0')}`)
  }

  // 随机生成活跃度数据
  const generateMonthlyData = (min, max, length) => {
    return Array.from({ length }, () => Math.floor(Math.random() * (max - min + 1)) + min)
  }

  const activeData = generateMonthlyData(65, 78, 12)
  const inactiveData = generateMonthlyData(22, 35, 12)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['活跃客户', '不活跃客户'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: months,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        axisLabel: {
          color: '#fff',
          rotate: 45
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '百分比(%)',
        nameTextStyle: {
          color: '#fff'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '活跃客户',
        type: 'line',
        stack: '客户',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(32, 164, 243, 0.8)' },
            { offset: 1, color: 'rgba(32, 164, 243, 0.1)' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#20a4f3'
        },
        itemStyle: {
          color: '#20a4f3',
          borderColor: '#fff',
          borderWidth: 2
        },
        data: activeData
      },
      {
        name: '不活跃客户',
        type: 'line',
        stack: '客户',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 112, 67, 0.8)' },
            { offset: 1, color: 'rgba(255, 112, 67, 0.1)' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#ff7043'
        },
        itemStyle: {
          color: '#ff7043',
          borderColor: '#fff',
          borderWidth: 2
        },
        data: inactiveData
      }
    ]
  }

  chart.setOption(option)
  return chart
}

// 初始化消费趋势图表
const initSpendingChart = () => {
  if (!spendingChart.value) return null

  const chart = echarts.init(spendingChart.value)

  // 生成过去24个月的标签
  const months = []
  const date = new Date()
  for (let i = 23; i >= 0; i--) {
    const monthDate = new Date(date)
    monthDate.setMonth(date.getMonth() - i)
    months.push(`${monthDate.getFullYear()}-${String(monthDate.getMonth() + 1).padStart(2, '0')}`)
  }

  // 模拟消费趋势数据
  const generateTrendData = (baseValue, variance, length) => {
    const result = []
    let value = baseValue
    
    for (let i = 0; i < length; i++) {
      // 添加一些波动，但整体保持上升趋势
      const change = Math.random() * variance - variance / 2 + i * 0.2
      value += change
      result.push(+value.toFixed(2))
    }
    
    return result
  }

  const spendingTrend = generateTrendData(65, 5, 24)

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff',
        rotate: 45,
        fontSize: 10,
        interval: 2
      }
    },
    yAxis: {
      type: 'value',
      name: '平均消费(¥)',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [{
      name: '月均消费',
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 3,
        color: '#ffc107'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(255, 193, 7, 0.5)' },
          { offset: 1, color: 'rgba(255, 193, 7, 0.1)' }
        ])
      },
      data: spendingTrend
    }]
  }

  chart.setOption(option)
  return chart
}

// 初始化合同类型分布图表
const initContractChart = () => {
  if (!contractChart.value) return null

  const chart = echarts.init(contractChart.value)

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '合同类型',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#0b1639',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 25612, name: '按月' },
          { value: 12845, name: '一年' },
          { value: 7221, name: '两年' }
        ]
      }
    ]
  }

  chart.setOption(option)
  return chart
}

// 初始化服务使用图表
const initServiceChart = () => {
  if (!serviceChart.value) return null

  const chart = echarts.init(serviceChart.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['已开通', '未开通'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['流媒体电影', '流媒体电视', '技术支持', '设备保护', '在线备份', '网络安全', '多线业务'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '已开通',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
          color: '#fff'
        },
        itemStyle: {
          color: '#67c23a'
        },
        data: [65, 70, 45, 50, 55, 40, 35]
      },
      {
        name: '未开通',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
          color: '#909399'
        },
        itemStyle: {
          color: '#909399'
        },
        data: [35, 30, 55, 50, 45, 60, 65]
      }
    ]
  }

  chart.setOption(option)
  return chart
}

// 更新时间
const updateTime = () => {
  currentTime.value = formatDateTime(new Date())
}

// 屏幕自适应
const handleResize = debounce(() => {
  // 确保所有图表元素存在
  nextTick(() => {
    Object.values(charts).forEach(chart => {
      if (chart) {
        chart.resize()
      }
    })
  })
}, 200)

// 初始化所有图表
const initAllCharts = () => {
  // 延迟确保DOM已经渲染完成
  nextTick(() => {
    charts.portrait = initPortraitChart()
    charts.age = initAgeChart()
    charts.activity = initActivityChart()
    charts.spending = initSpendingChart()
    charts.contract = initContractChart()
    charts.service = initServiceChart()
    
    // 初始调整大小以适应当前视口
    handleResize()
  })
}

onMounted(async () => {
  // 加载数据
  await loadInsightData()

  // 设置定时器
  updateTime()
  timer = setInterval(updateTime, 1000)

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  Object.values(charts).forEach(chart => {
    if (chart) {
      chart.dispose()
    }
  })
})
</script>

<style lang="scss" scoped>
.customer-insight-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh; /* Change from fixed height to minimum height */
  background: linear-gradient(135deg, #0f2c5a, #0d1130);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto; /* Change from hidden to auto to allow scrolling if needed */
}

// 头部样式
.screen-header {
  width: 100%;
  height: 60px;
  background: rgba(11, 27, 61, 0.8);
  border-bottom: 1px solid rgba(0, 164, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
  z-index: 10;
  
  .header-left {
    display: flex;
    align-items: center;
    
    .logo {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      
      img {
        width: 100%;
        height: 100%;
      }
    }
    
    .title {
      font-size: 22px;
      font-weight: bold;
      background: linear-gradient(to right, #00c6ff, #0072ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
      display: flex; /* 让标题和返回按钮在一行 */
      align-items: center; /* 垂直居中对齐 */
      
      .back-button-placeholder {
        width: 0; /* 不占用实际空间，只用于定位 */
        height: 36px;
        display: inline-block;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          width: 80px; /* 预留返回按钮的位置 */
          height: 100%;
        }
      }
    }
  }
  
  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    .time {
      font-size: 18px;
      font-weight: 500;
      color: #00f0ff;
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    
    .el-button {
      margin-left: 0;
      margin-right: 40px; /* 增加右边距，让按钮向左移动 */
    }
  }
}

// 内容区域
.screen-content {
  flex: 1;
  display: flex;
  padding: 10px;
  gap: 10px;
  min-height: calc(100vh - 100px); /* Set minimum height based on viewport minus headers/footers */
  
  @media screen and (max-height: 768px) {
    flex-direction: column; /* Stack panels vertically on shorter screens */
    overflow-y: auto;
  }
  
  // 面板通用样式
  .panel-item {
    background: rgba(10, 35, 70, 0.7);
    border: 1px solid rgba(0, 164, 255, 0.4);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
    margin-bottom: 10px;
    
    .panel-header {
      height: 36px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      background: rgba(0, 110, 255, 0.2);
      border-bottom: 1px solid rgba(0, 164, 255, 0.4);
      
      .panel-title {
        position: relative;
        padding-left: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #7fdbff;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 16px;
          background: linear-gradient(to bottom, #00f0ff, #0072ff);
        }
      }
    }
    
    .panel-content {
      padding: 15px;
      height: calc(100% - 36px);
      overflow: hidden;
    }
  }
  
  // 左侧面板
  .left-panel {
    width: 30%;
    display: flex;
    flex-direction: column;
    
    @media screen and (max-height: 768px) {
      width: 100%;
      height: auto;
    }
    
    .customer-portrait {
      height: 60%;
      min-height: 300px;
      
      .portrait-chart {
        width: 100%;
        height: 100%;
      }
    }
    
    .age-distribution {
      flex: 1;
      min-height: 200px;
      
      .chart-container {
        height: 100%;
      }
    }
  }
  
  // 中间面板
  .center-panel {
    width: 40%;
    display: flex;
    flex-direction: column;
    
    @media screen and (max-height: 768px) {
      width: 100%;
      height: auto;
    }
    
    .customer-activity {
      height: 50%;
      min-height: 250px;
      
      .customer-stats {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        
        .stat-item {
          flex: 1;
          text-align: center;
          padding: 5px;
          border-right: 1px solid rgba(127, 219, 255, 0.2);
          
          &:last-child {
            border-right: none;
          }
          
          .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: #00f0ff;
          }
          
          .stat-label {
            font-size: 12px;
            color: #a7c9fe;
          }
        }
      }
      
      .chart-container {
        height: calc(100% - 60px);
      }
    }
    
    .spending-trend {
      flex: 1;
      min-height: 250px;
      
      .chart-container {
        height: 100%;
      }
    }
  }
  
  // 右侧面板
  .right-panel {
    width: 30%;
    display: flex;
    flex-direction: column;
    
    @media screen and (max-height: 768px) {
      width: 100%;
      height: auto;
    }
    
    .contract-distribution {
      height: 45%;
      min-height: 250px;
      
      .chart-container {
        height: 100%;
      }
    }
    
    .service-usage {
      flex: 1;
      min-height: 250px;
      
      .chart-container {
        height: 100%;
      }
    }
  }
}

// 底部区域
.screen-footer {
  height: 40px;
  background: rgba(11, 27, 61, 0.8);
  border-top: 1px solid rgba(0, 164, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  
  .footer-stats {
    display: flex;
    width: 100%;
    justify-content: space-around;
    
    .stat-item {
      .stat-label {
        color: #a7c9fe;
        margin-right: 5px;
      }
      
      .stat-value {
        color: #00f0ff;
        font-weight: bold;
      }
    }
  }
}

// 图表容器通用样式
.chart-container {
  width: 100%;
  height: 100%;
}
</style> 